<html>

<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>

<body>
    <div id="app"></div>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
	<script type="text/jsx">
		var MessageBox = React.createClass({
			getInitialState:function(){
				console.log('getInitialState');
				return {
					count: 0,
				}
			},
			getDefaultProps:function(){
				console.log('getDefaultProps');
				return {};
			},
			componentWillMount:function(){
				console.log('componentWillMount');
				var self = this;

				this.timer = setInterval(function(){
					self.setState({
						count: self.state.count + 1,
					})
				},1000);

			},
			componentDidMount:function(){
				console.log('componentDidMount')
				console.log(this.getDOMNode() );
			},
			componentWillUnmount: function(){
				alert('you are tring to kill me !! ')

				clearInterval(this.timer);

			},
			killMySelf: function(){
				React.unmountComponentAtNode(  document.getElementById('app') );
			},
			render:function(){	
				console.log('渲染')
				return ( 
					<div>
						<h1 > 计数： {this.state.count}</h1> 
						<button onClick={this.killMySelf}>卸载掉这个组件</button>
						<Submessage/>
					</div>
				)
			}
		});

		var Submessage = React.createClass({
			render:function(){
				return (
					<h3>写代码很有意思</h3>
				)
			}
		});


		var messageBox = React.render( <MessageBox/>, 
			document.getElementById('app')
		)


	</script>


</body>

</html>